<template>
  <div class="image-generator">
    <Breadcrumb />
    
    <div class="tool-header">
      <div class="container">
        <h1>图片生成工具</h1>
        <p class="subtitle">快速生成创意图片，支持多种模板和样式</p>
      </div>
    </div>

    <div class="tool-content">
      <div class="container">
        <div class="editor-panel">
          <!-- 左侧模板选择 -->
          <div class="template-section">
            <h3>选择模板</h3>
            <div class="template-list">
              <div 
                v-for="template in templates" 
                :key="template.id"
                class="template-item"
                :class="{ active: selectedTemplate === template.id }"
                @click="selectTemplate(template)"
              >
                <img :src="template.preview" :alt="template.name">
                <span class="template-name">{{ template.name }}</span>
              </div>
            </div>
          </div>

          <!-- 右侧编辑区域 -->
          <div class="edit-section">
            <div class="preview-area">
              <div class="canvas-container" ref="canvasContainer">
                <div class="preview-content" :style="previewStyle">
                  <img v-if="selectedTemplate" :src="selectedTemplate.preview" class="template-image">
                  <div 
                    v-if="text"
                    class="text-overlay"
                    :style="textStyle"
                  >{{ text }}</div>
                </div>
              </div>
            </div>

            <div class="control-area">
              <div class="control-group">
                <label>文本内容：</label>
                <input type="text" v-model="text" placeholder="请输入文字...">
              </div>
              <div class="control-group">
                <label>字体大小：</label>
                <input type="range" v-model="fontSize" min="12" max="48" step="1">
                <span>{{ fontSize }}px</span>
              </div>
              <div class="control-group">
                <label>文字颜色：</label>
                <input type="color" v-model="textColor">
              </div>
              <button class="download-btn" @click="downloadImage">下载图片</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import Breadcrumb from '@/components/Breadcrumb.vue'
import html2canvas from 'html2canvas'

interface Template {
  id: number
  name: string
  preview: string
}

// 模板数据
const templates = ref<Template[]>([
  {
    id: 1,
    name: '创可贴风格',
    preview: 'https://img.zcool.cn/community/01639e5d127749a8012187f4f0334a.jpg'
  },
  {
    id: 2,
    name: '小红书风格',
    preview: 'https://img.zcool.cn/community/0122785d127749a8012187f44c162f.jpg'
  }
])

const selectedTemplate = ref<Template | null>(null)
const text = ref('')
const fontSize = ref(24)
const textColor = ref('#ffffff')

const selectTemplate = (template: Template) => {
  selectedTemplate.value = template
}

const previewStyle = computed(() => ({
  position: 'relative' as const,
  width: '100%',
  height: '100%',
  overflow: 'hidden'
}))

const textStyle = computed(() => ({
  position: 'absolute' as const,
  top: '50%',
  left: '50%',
  transform: 'translate(-50%, -50%)',
  fontSize: `${fontSize.value}px`,
  color: textColor.value,
  textAlign: 'center' as const,
  width: '80%',
  textShadow: '2px 2px 4px rgba(0,0,0,0.5)'
}))

const downloadImage = async () => {
  const element = document.querySelector('.preview-content')
  if (!element) return
  
  try {
    const canvas = await html2canvas(element as HTMLElement)
    const link = document.createElement('a')
    link.download = 'generated-image.png'
    link.href = canvas.toDataURL('image/png')
    link.click()
  } catch (error) {
    console.error('Error generating image:', error)
  }
}
</script>

<style scoped lang="scss">
.image-generator {
  .tool-header {
    background: linear-gradient(135deg, var(--primary-color), var(--hover-color));
    padding: 40px 0;
    color: white;
    text-align: center;
    margin-bottom: 30px;

    h1 {
      font-size: 2.5rem;
      margin-bottom: 1rem;
    }

    .subtitle {
      font-size: 1.2rem;
      opacity: 0.9;
    }
  }

  .editor-panel {
    display: flex;
    gap: 30px;
    background: white;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);

    .template-section {
      width: 260px;

      h3 {
        margin-bottom: 15px;
      }

      .template-list {
        display: flex;
        flex-direction: column;
        gap: 15px;

        .template-item {
          cursor: pointer;
          border: 2px solid transparent;
          border-radius: 8px;
          overflow: hidden;
          transition: all 0.3s ease;

          &:hover {
            transform: translateY(-2px);
          }

          &.active {
            border-color: var(--primary-color);
          }

          img {
            width: 100%;
            height: 150px;
            object-fit: cover;
          }

          .template-name {
            display: block;
            padding: 8px;
            text-align: center;
            background: #f8f9fa;
          }
        }
      }
    }

    .edit-section {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 20px;

      .preview-area {
        flex: 1;
        background: #f8f9fa;
        border-radius: 8px;
        padding: 20px;

        .canvas-container {
          width: 100%;
          height: 400px;
          background: white;
          border-radius: 8px;
          overflow: hidden;
        }

        .preview-content {
          width: 100%;
          height: 100%;
          position: relative;

          .template-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }
        }
      }

      .control-area {
        background: #f8f9fa;
        padding: 20px;
        border-radius: 8px;

        .control-group {
          margin-bottom: 15px;
          display: flex;
          align-items: center;
          gap: 10px;

          label {
            width: 80px;
            color: #666;
          }

          input[type="text"] {
            flex: 1;
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 4px;

            &:focus {
              outline: none;
              border-color: var(--primary-color);
            }
          }

          input[type="range"] {
            flex: 1;
          }

          input[type="color"] {
            width: 50px;
            height: 30px;
            padding: 0;
            border: none;
          }
        }

        .download-btn {
          width: 100%;
          padding: 12px;
          background: var(--primary-color);
          color: white;
          border: none;
          border-radius: 6px;
          cursor: pointer;
          transition: background 0.3s ease;

          &:hover {
            background: var(--hover-color);
          }
        }
      }
    }
  }
}
</style> 